<template>
  <div>
    <table
      border="1"
      width="700"
      style="border-collapse: collapse">
        <caption>
        购物车
      </caption>
      <thead>
        <tr>
          <th>
            <input type="checkbox" v-model="isCheckAll"/> <span>全选</span>
          </th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>总价</th>
          <th>操作</th>
        </tr>
      </thead>
        <ShopCarBody :goodList="goodList" 
        @downFn="downFn"
        @upFn="upFn"
        @delFn="delFn"
        />
        <ShopCarFoot :goodList="goodList" />
    </table>
  </div>
</template>

<script>
import ShopCarBody from '@/components/day05-购物车body.vue'
import ShopCarFoot from '@/components/day05-购物车foot.vue'
export default {
  components:{
    ShopCarBody,
    ShopCarFoot
  },
  data() {
    return {
      all:0,
      goodList: [
        {
          name: "诸葛亮",
          price: 1000,
          num: 1,
          checked: false,
        },
        {
          name: "蔡文姬",
          price: 1500,
          num: 1,
          checked: false,
        },
        {
          name: "妲己",
          price: 2000,
          num: 1,
          checked: false,
        },
        {
          name: "鲁班",
          price: 2200,
          num: 1,
          checked: false,
        },
      ],
    };
  },
  methods:{
downFn(name){//减
  this.goodList.forEach(item=> {
    if(item.name === name && item.num > 0){
     item.num = item.num - 1
    }
  })
},
upFn(name){//加
  this.goodList.forEach(item=> {
    if(item.name === name){
     item.num = item.num + 1
    }
  })
},
delFn(name){ //删除
this.goodList = this.goodList.filter(item=>item.name !== name)
  }
},
computed:{
isCheckAll :{
  get () {
    return this.goodList.every(item=> item.checked)
  },
  set(val){
    this.goodList.forEach(item=>item.checked = val)
  }
}
}
};
</script>

<style>
</style>